<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="root" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Lowin</title>
    <link rel="stylesheet" href="${root}/static/css/auth.css">
</head>

<body>
<div class="lowin">
    <div class="lowin-brand">
        <img src="${root}/static/images/kodinger.jpg" alt="logo">
    </div>
    <div class="lowin-wrapper">

            <div class="lowin-box lowin-register">
                <div class="lowin-box-inner">
                    <form action="${root}/register" id="reform">
                        <p>创建个一个账户</p>
                        <p id="msg"></p>
                        <div class="lowin-group">
                            <label>用户名</label>
                            <input type="text" name="username" autocomplete="name" class="lowin-input" onblur="jsonCheckUsername()" id="username">
                        </div>
                        <div class="lowin-group">
                            <label>密码</label>
                            <input type="password" autocomplete="email" name="password" class="lowin-input">
                        </div>
                        <div class="lowin-group">
                            <label>确认密码</label>
                            <input type="password" name="password" autocomplete="current-password" class="lowin-input">
                        </div>
                        <button class="lowin-btn" type="button" onclick=" register()">
                            注册
                        </button>

                        <div class="text-foot">
                            Already have an account? <a href="" class="login-link">Login</a>
                        </div>
                    </form>
                </div>
            </div>

    </div>

    <footer class="lowin-footer">
        Design By @itskodinger. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
    </footer>
</div>

<script src="${root}/static/js/authx.js"></script>
<script src="${root}/static/jquery/jquery-2.2.4.min.js"></script>
<script>
    Authx.init({
        login_url: '#login',
        forgot_url: '#forgot',

    });

    function register() {

        $("#reform").submit();
    }

    function checkUsername() {
        var username = $("#username").val();
        var msg = $("#msg");
        /*将此用户名提交到后台 ajax：提交的是普通数据
        * //. 请求方式 get post
        * 2. 请求到哪里： url
        * 3.请求的数据： data
        * 4:响应结果？ success(data)  error(data)
        *
        * */
        $.ajax({
           url:"${root}/checkUsername",
            type:"POST",
            data:"username="+username,
            error:function (data) {

            },
            success:function (data) {
                if (data == "true"){
                    msg.html("可以注册");
                    msg.css({"color":"green"});
                }else {
                    msg.html("不能注册");
                    msg.css({"color":"red"});
                }
            }
        })
    }

    function jsonCheckUsername() {

        var username = $("#username").val();
        var msg = $("#msg");
        /*将此用户名提交到后台 ajax：提交的是json数据
        * //. 请求方式 get post
        * 2. 请求到哪里： url
        * 3.请求的数据： data
        * 4:响应结果？ success(data)  error(data)
        * 5.请求的数据格式是什么样的？默认是普通 contentType:json
        * 6:响应的数据的数据是什么格式？dataType:json
        * */

        $.ajax({
                url:"${root}/jsonCheck",
              type:"POST",
            contentType: 'application/json',
            data:JSON.stringify({username:username}),
            dataType:"json",
            success:function (data) {
                    if (data.msg == "ture") {

                    }else {

                    }
              alert(data.msg);
            }
            }
        )

    }
</script>
</body>
</html>